<template>
    <div class="ProjectClass row">
        <div class="col-11 offset-1" style="margin-top: 20px;">
            <img src="../../../assets/WPI_Logo.png" style="margin:20px;" />
            <!-- 方案标题 -->
            <h3>{{projectData.titleName}}</h3>
            <!-- 方案 ID -->
            <p style="color: dimgray;">方案 ID：{{projectData.ORCode}}</p>
            <!-- 推荐评分 -->
            <el-rate v-model="recommend" disabled show-score text-color="#ff9900" score-template="{value}" style="display: inline;margin-right: 20px;"></el-rate>
            <!-- 点赞按钮 -->
            <el-button type="text" class="actionButton" @click="btnOperation(projectData._id,'like', $event)" style="outline: none;">
                <i :class="$store.state.like.indexOf(projectData._id) != -1 ?'iconfont el-icon-aixin_shixin':'iconfont el-icon-aixin'"></i>
                <span>{{projectData.like}}</span>
            </el-button>
            <!-- 收藏按钮 -->
            <el-button type="text" class="actionButton" @click="btnOperation(projectData._id, 'collection', $event)"
                style="outline: none;">
                <i :class="$store.state.collection.indexOf(projectData._id) != -1 ?'iconfont el-icon-shoucang_shixin':'iconfont el-icon-shoucang'"></i>
                <span>{{projectData.collect}}</span>
            </el-button>

            <!-- 方案详情 -->
            <el-collapse v-model="activeNames">
                <el-collapse-item title="方案简介" name="1">
                    <div style="font-size: 18px;padding: 0px 60px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{projectData.intro}}</div>
                </el-collapse-item>
                <el-collapse-item title="功能描述" name="2">
                    <ul style="padding: 0px 80px;">
                        <li v-for="(item,index) in fun" :key="index" style="font-size: 18px;">{{item}}</li>
                    </ul>
                </el-collapse-item>
                <el-collapse-item title="方案特点" name="3">
                    <ul style="padding: 0px 80px;">
                        <li v-for="(item,index) in feature" :key="index" style="font-size: 18px;">{{item}}</li>
                    </ul>
                </el-collapse-item>
                <el-collapse-item title="功能框图" name="4">
                    <center><img :src="diagram" style="width: 85%;margin: 40px 0px;border-radius: 8px;box-shadow: 0px 0px 10px #3636362c;" /></center>
                </el-collapse-item>
                <el-collapse-item title="方案图片" name="5">
                    <center><img :src="item" v-for="(item,index) in image" :key="index" style="width: 85%;margin: 40px 0px;border-radius: 8px;box-shadow: 0px 0px 10px #3636362c;" /></center>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                activeNames: ['1', '2', '3', '4', '5'], // 设置开始折叠面板的展开
                likeFlag: true, // 点赞图标的切换
                collectionFlag: true, // 收藏图标的切换
                project_id: '/', // 方案的 id
                projectData: '', // 方案详细信息的数据
                feature: [], // 方案特点数组
                diagram: '', // 方案功能框图
                image: [], // 方案图片数组
                fun: [], // 方案功能描述数组
                recommend: 0, // 推荐指数
                url: { // 请求 Api 链接
                    findProject: this.$Global.url.findProject + this.project_id,
                    collectionApi: this.$Global.url.collection,
                    likeApi: this.$Global.url.like
                }
            };
        },
        created() {
            // 组件创建完自动下载方案分类的数据
            this.project_id += this.$route.params.project_id;
            // 开发者模式
            // if (process.env.NODE_ENV === "development") {
            this.url.findProject = this.$Global.url.baseUrl + this.$Global.url.findProject + this.project_id;
            this.url.collectionApi = this.$Global.url.baseUrl + this.$Global.url.collection;
            this.url.likeApi = this.$Global.url.baseUrl + this.$Global.url.like;
            // }
            this.getClassData();
            // console.log(this.project_id)
        },
        methods: {
            /**
             * 获取方案分类的数据
             */
            getClassData() {
                // console.log(this.project_id)
                this.$http.get(this.url.findProject, {
                        params: {
                            project_id: this.project_id
                        }
                    }).then(response => {
                        if (response.status == 200) {
                            this.projectData = response.data;
                            this.feature = this.projectData.feature;
                            this.fun = this.projectData.function;
                            this.recommend = this.projectData.recommend;
                            this.diagram = this.$Global.url.baseUrl + this.projectData.diagram;
                            for (var i = 0; i < this.projectData.image.length; i++) {
                                this.image = this.image.concat(this.$Global.url.baseUrl + this.projectData.image[i])
                            }
                            // this.image = this.projectData.image;
                            // console.log(this.projectData)
                            // console.log(this.image)
                        } else {
                            // console.log('请求数据失败')
                            this.$message("请求数据失败");
                        }
                    })
                    .catch(error => {
                        // console.log(error);
                        this.$message('请求失败');
                    });
            },
            /**
             * 收藏 & 点赞
             */
            btnOperation(id, operation, event, index) {
                var data = {
                    _id: id
                };
                var url;
                if (operation === 'like') {
                    url = this.url.likeApi;
                } else if (operation === 'collection') {
                    url = this.url.collectionApi;
                }
                this.$http.post(url, data).then(response => {
                        if (response.status == 200) {
                            if (response.data.success) {
                                this.$message(response.data.message);
                                if (operation === 'like') {
                                    this.$store.commit('changeLike', id);
                                } else if (operation === 'collection') {
                                    this.$store.commit('changeCollection', id);
                                }

                                switch (response.data.message) {
                                    case '删除点赞成功':
                                        this.pprojectData.like--;
                                        break;
                                    case '添加点赞成功':
                                        this.projectData.like++;
                                        break;
                                    case '删除收藏成功':
                                        this.projectData.collect--;
                                        break;
                                    case '添加收藏成功':
                                        this.projectData.collect++;
                                        break;
                                }
                            } else {
                                this.$message('操作失败');
                            }
                        } else {
                            this.$message('请求失败');
                        }
                    })
                    .catch(error => {
                        // console.log(error);
                        if (error.status == 401) {
                            this.$message({
                                type: 'warning',
                                message: '请登录后尝试！'
                            })
                        }
                    });
            },
        }
    }
</script>

<style>
    #collapse-head {
        border-radius: 8px 8px 0px 0px #3636369c;
    }

    .el-collapse-item__header {
        font-size: 20px !important;
        padding: 0px 20px;
    }
</style>